<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">

<head>
    <th:block th:include="include-front :: head('留言—Dimple的个人博客','留言板')"/>
    <link rel="stylesheet" th:href="@{/front/css/comment.css}"/>
    <link rel="stylesheet" th:href="@{/front/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/front/plugin/simplemde/simplemde.min.css}"/>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>
</head>
<body class="nobg">
<th:block th:replace="include-front :: header"/>
<div class="container" id="location">
    <!--左侧开始-->
    <section>
        <div class="comment-area">
            <img src="/front/images/leaveComment-bg.png"
                 style="width:100%;"
                 alt="Dimple个人博客留言板"/>
            <h3 class="form-btn blue-text">
                <a href="javascript:;">
                    <i class="fa fa-edit"></i>我要留言
                </a>
            </h3>
            <!-- 通用评论开始 -->
            <div class="comment-area" th:fragment="comment" id="Comment">
                <h4 class="index-title">
                    <input type="hidden" id="pageId" th:value="${pageId}">
                    <i class="fa fa-comments-o"></i>[[${'当前共有 '+comments.size()+' 条评论'}]]
                </h4>
                <div id="Space"></div>

                <div class="commentList">
                    <input type="hidden" id="replyId">
                    <ul class="comment">
                        <li th:each="comment:${comments}">
                            <div class="comment-body fade-in" th:id="${'comment-'+comment.id}">
                                <div class="cheader">
                                    <div class="user-img">
                                        <img class="userImage" th:src="${comment.avatar}"
                                             th:onerror="this.src='/front/images/user.png'">
                                    </div>
                                    <div class="user-info">
                                        <div class="nickname">
                                            <a href="javascript:void(0)" rel="external nofollow">
                                                <strong th:text="${comment.nickname}"></strong>
                                            </a>
                                            <i class="icons os-null" title="Windows 10"></i>
                                            <i class="icons browser-null" title="Chrome 76.0.3809.87"></i>
                                        </div>
                                        <div class="timer">
                                            <i class="fa fa-clock-o fa-fw"></i><span
                                                th:text="${#dates.format(comment.createTime,'yyyy-MM-dd hh:mm:ss')}"></span>
                                            <i class="fa fa-map-marker fa-fw"></i> [(${comment.location})]
                                        </div>
                                    </div>
                                </div>
                                <div class="content">
                                    <a th:if="${comment.parentComment != null}"
                                       th:href="${'#comment-'+comment.parentComment.id}"
                                       class="comment-quote"
                                       th:text="${'@'+comment.parentComment.nickname}"></a>
                                    <div th:if="${comment.parentComment != null}"
                                         style="background-color: #f5f5f5;padding: 5px;margin: 5px;border-radius: 4px;">
                                        <i class="fa fa-quote-left"></i>
                                        <p></p>
                                        <div style="padding-left: 10px;">
                                            <p th:utext="${comment.parentComment.content}"></p>
                                        </div>
                                    </div>
                                    <div>
                                        <p th:utext="${comment.content}">21321</p>
                                    </div>
                                </div>
                                <div class="sign" th:id="${'commentDiv-'+comment.id}">
                                    <a href="javascript:void(0);" class="comment-up"
                                       th:onclick="good(event,[[${comment.id}]])">
                                        <i class="fa fa-thumbs-o-up"></i>赞(<span class="count"
                                                                                 th:id="${'good-count-'+comment.id}"
                                                                                 th:text="${comment.good}">0</span>)
                                        <i class="sepa"></i>
                                    </a>
                                    <a href="javascript:void(0);" class="comment-down" t
                                       th:onclick="bad(event,[[${comment.id}]])">
                                        <i class="fa fa-thumbs-o-down"></i>踩(<span class="count"
                                                                                   th:id="${'bad-count-'+comment.id}"
                                                                                   th:text="${comment.bad}">0</span>)
                                        <i class="sepa"></i>
                                    </a>
                                    <a href="javascript:void(0);" class="comment-reply" th:id="${'reply-'+comment.id}"
                                       th:onclick="reply([[${comment.id}]])"
                                       style="display: inline;">
                                        <i class="fa fa-reply"></i>回复
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 通用评论结束 -->
        </div>
    </section>
    <th:block th:replace="include-front :: side"/>
</div>
<th:block th:replace="include-front :: footer"/>
<script th:src="@{/front/js/comment.js}"></script>
<script th:src="@{/front/plugin/simplemde/simplemde.min.js}"></script>

<script>
    $(function () {
        initCommentEditor("#Space");
    });
</script>

</body>
</html>
